<template>
  <div class="tip">
    <ExclamationOutlined
      style="color: red; font-weight: bold; font-size: 16px"
    />
    右击相册即可编辑相册
  </div>
  <div v-if="photoList.length !== 0" class="photoList">
    <div
      v-for="(photo, index) in photoList"
      :key="index"
      class="photo"
      @click="goDetail(photo)"
    >
      <a-dropdown :trigger="['contextmenu']">
        <div>
          <div class="cover">
            <img
              :src="photo.cover"
              alt="相册封面"
              style="width: 300px; height: 180px"
            />
          </div>
          <div class="info">
            {{ photo.name }}
            <span v-if="photo.isPrivate === 0">
              <EyeInvisibleOutlined style="color: #409eff" /> 仅自己可见
            </span>
            <span v-else> <EyeOutlined /> 公开 </span>
          </div>
        </div>
        <template #overlay>
          <a-menu>
            <a-menu-item key="1" @click="editPhotoGroup(photo)"
              >编辑</a-menu-item
            >
            <a-menu-item key="2">
              <a-popconfirm
                cancel-text="取消"
                ok-text="删除"
                title="是否删除?"
                @confirm="deletePhotoGroup(photo)"
              >
                删除
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <a-modal
      title="编辑相册"
      :open="opening"
      @cancel="resetForm"
      :footer="null"
    >
      <a-form
        ref="formRef"
        :label-col="labelCol"
        :model="formState"
        :rules="rules"
        :wrapper-col="wrapperCol"
        style="margin-top: 15px"
      >
        <a-form-item ref="name" label="相册名" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入分类名" />
        </a-form-item>
        <a-form-item ref="isPrivate" label="权限" name="isPrivate">
          <a-radio-group v-model:value="formState.isPrivate">
            <a-radio :value="0">仅自己可见</a-radio>
            <a-radio :value="1">公开</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="相册封面" name="cover">
          <Upload v-model:FileList="formState.cover"></Upload>
        </a-form-item>
        <a-form-item
          :wrapper-col="{ span: 14, offset: 14 }"
          style="margin-top: 15px"
        >
          <a-button>重置</a-button>
          <a-button style="margin-left: 15px" type="primary" @click="onSubmit">
            更新
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <!--  empty-->
  <div v-else>
    <a-empty
      :image-style="{
        height: '300px',
      }"
      image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
    >
      <template #description>
        <span> 暂无相册 </span>
      </template>
      <a-button type="primary">立即创建</a-button>
    </a-empty>
  </div>
</template>
<script setup>
import { reactive, ref, toRaw } from "vue";
import {
  ExclamationOutlined,
  EyeInvisibleOutlined,
  EyeOutlined,
} from "@ant-design/icons-vue";
import { delPhoto, PhotoAll, updatePhoto } from "@/api/photo.js";
import { message } from "ant-design-vue";
import Upload from "@/components/Upload/index.vue";
import { userStore } from "@/store/modules/user.js";
import router from "@/router/index.js";

const user = userStore();
const formRef = ref("");
let photoList = ref([]);
let opening = ref(false);
const formState = reactive({
  name: "",
  cover: "",
  summary: "",
  isPrivate: 0,
});
let editId = ref(null);
// 表单配置项
const wrapperCol = {
  span: 13,
};
const labelCol = {
  span: 7,
};
const rules = {
  name: [
    {
      required: true,
      message: "分类名不能为空",
      trigger: "change",
    },
  ],
  summary: [
    {
      required: true,
      message: "分类描述不能为空",
      trigger: "change",
    },
  ],
  isPrivate: [
    {
      required: true,
      message: "相册权限不能为空",
      trigger: "change",
    },
  ],
};

// 获取相册列表
const getList = async (params) => {
  let res = await PhotoAll({ ...params, userId: user.user_id });
  if (!res || res.status === 400) {
    message.error(res.data);
    return;
  }
  photoList.value = res.data;
};

// 删除相册
const deletePhotoGroup = async (photo) => {
  const res = await delPhoto({ id: photo.id });
  if ((res.status = 400)) {
    await getList();
    message.success(res.data);
  }
  message.error(res.data);
};

// 编辑
const editPhotoGroup = (data) => {
  editId.value = data.id;
  handeEditData(data);
  opening.value = true;
};

// 提交更新数据
const onSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      let info = toRaw(formState);
      let res = await updatePhoto({ ...info, id: editId.value });
      if (res && res.status != 400) {
        await getList();
        message.success(res.data);
        resetForm();
        return;
      }
      message.error(res.data);
    })
    .catch((error) => {
      console.log("error", error);
    });
};

// 处理表单回显数据
const handeEditData = (obj) => {
  if (obj) {
    for (let key in obj) {
      if (formState.hasOwnProperty(key)) {
        formState[key] = obj[key];
      }
    }
  }
};

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields();
  opening.value = false;
};

const goDetail = (photo) => {
  router.push({
    path: `/photo/detail/${photo.id}`,
  });
};

getList();
</script>

<style lang="scss" scoped>
.tip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 5px;
  color: #a8abb2;
  font-weight: bold;
}

.photoList {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;

  .photo {
    position: relative;
    width: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    cursor: pointer;

    .info {
      width: 100%;
      height: 60px;
      padding: 10px;
      color: #333;
      background: #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        color: #a8abb2;
        font-size: 12px;
      }
    }
  }
}
</style>
